<template>
  <div class="p-4 space-y-4">
    <div class="text-xl font-bold text-blue-700 mb-2">BaseButton</div>
    <div class="text-gray-700 mb-2">
      主按钮组件，统一全局主按钮样式，基于 Vant4 van-button 封装。
    </div>
    <div class="bg-white rounded-xl p-4 shadow">
      <div class="font-bold mb-2 text-blue-600">用法</div>
      <pre
        class="bg-blue-50 rounded p-3 text-sm text-blue-700 overflow-x-auto"
      ><BaseButton>主要操作</BaseButton>
<BaseButton type="success">成功按钮</BaseButton>
<BaseButton :loading="true">加载中</BaseButton></pre>
    </div>
    <div class="bg-white rounded-xl p-4 shadow">
      <div class="font-bold mb-2 text-green-600">示例1</div>
      <pre
        class="bg-green-50 rounded p-3 text-sm text-green-700 overflow-x-auto"
      ><!-- 块级主按钮 -->
<BaseButton>提交</BaseButton></pre>
    </div>
    <div class="bg-white rounded-xl p-4 shadow">
      <div class="font-bold mb-2 text-green-600">示例2</div>
      <pre
        class="bg-green-50 rounded p-3 text-sm text-green-700 overflow-x-auto"
      ><!-- 圆角、禁用、loading 状态 -->
<BaseButton :round="true" :disabled="true">禁用按钮</BaseButton>
<BaseButton :loading="true">加载中</BaseButton></pre>
    </div>
    <div class="bg-white rounded-xl p-4 shadow border-l-4 border-blue-400">
      <div class="font-bold mb-2 text-gray-700">说明</div>
      <div class="text-xs text-gray-600 leading-relaxed">
        统一全局主按钮样式，支持 type/block/round/loading/disabled/nativeType
        等属性，默认块级、圆角。<br />
        支持所有 van-button 的原生属性和事件，适合移动端主操作场景。
      </div>
    </div>
  </div>
</template>
